<template>
  <div class="Alarm">
    <div class="alarmM">
      <div @click="moreclick" class="more">
        查看更多
        <!-- <a style="font-size: 30px; color: #009cff">查看更多</a> -->
      </div>
    </div>
    <div class="alarmList">
      <div class="rollTitle">
        <el-row>
          <el-col :span="3">序号</el-col>
          <el-col :span="2">等级</el-col>
          <el-col :span="7">时间</el-col>
          <el-col :span="6">标题</el-col>
          <el-col :span="6">故障描述</el-col>
        </el-row>
      </div>
      <div class="seamless-warp">
        <vue-seamless-scroll v-show="isShow" :data="tableData">
          <ul>
            <li
              v-for="(item, index) in tableData"
              :key="index"
              @click="liclick($event)"
            >
              <el-row>
                <el-col
                  :span="3"
                  :data-obj="JSON.stringify(item)"
                  :id="index + 1"
                  style="font-family: dig; font-size: 36px; font-weight: 900"
                  >{{ index + 1 }}</el-col
                >
                <el-col
                  :span="2"
                  class="rollItem"
                  :class="{
                    red: item.treatmentState == '1',
                    white: item.treatmentState == '0'
                  }"
                  :data-obj="JSON.stringify(item)"
                  :id="index + 1"
                  >{{ item.level }}</el-col
                >
                <el-col
                  :span="7"
                  class="rollItem"
                  :class="{
                    red: item.treatmentState == '1',
                    white: item.treatmentState == '0'
                  }"
                  :data-obj="JSON.stringify(item)"
                  :id="index + 1"
                  >{{ format(item.alarmTime) }}</el-col
                >
                <el-col
                  :span="6"
                  class="rollItem"
                  :class="{
                    red: item.treatmentState == '1',
                    white: item.treatmentState == '0'
                  }"
                  :data-obj="JSON.stringify(item)"
                  :id="index + 1"
                  >{{ item.name }}</el-col
                >
                <el-col
                  :span="6"
                  class="rollItem"
                  :class="{
                    red: item.treatmentState == '1',
                    white: item.treatmentState == '0'
                  }"
                  :data-obj="JSON.stringify(item)"
                  :id="index + 1"
                  >{{ item.content }}</el-col
                >
              </el-row>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <div class="empty" v-show="!isShow">暂无数据</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { TUVector3, TUVector2, TURotator } from "tumap/dist/tumap.v1.8.js";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      isShow: true,
      tableData: [],
      billboardList: [],
      count: 0,
      tempositions: [
        {
          x: -11404.5029296875,
          y: 144.9384765625,
          z: 10,
          roll: 0,
          pitch: -15.559989929199219,
          yaw: 109.20012664794922,
          distance: 1000
        },
        {
          x: -1326.5460205078125,
          y: -1054.7359619140625,
          z: 10,
          roll: 0,
          pitch: -17.04499626159668,
          yaw: 8.1600980758667,
          distance: 1000
        },
        {
          x: -6867.65966796875,
          y: -863.5277099609375,
          z: 10,
          roll: 0,
          pitch: -24.334993362426758,
          yaw: 9.120153427124023,
          distance: 1000
        },
        {
          x: -11270.2451171875,
          y: -1019.4290771484375,
          z: 10,
          roll: 0,
          pitch: -7.999988555908203,
          yaw: -174.24000549316406,
          distance: 1000
        },
        {
          x: -11404.5029296875,
          y: 144.9384765625,
          z: 10,
          roll: 0,
          pitch: -15.559989929199219,
          yaw: 109.20012664794922,
          distance: 1000
        },
        {
          x: -1326.5460205078125,
          y: -1054.7359619140625,
          z: 10,
          roll: 0,
          pitch: -17.04499626159668,
          yaw: 8.1600980758667,
          distance: 1000
        },
        {
          x: -6867.65966796875,
          y: -863.5277099609375,
          z: 10,
          roll: 0,
          pitch: -24.334993362426758,
          yaw: 9.120153427124023,
          distance: 1000
        },
        {
          x: -11270.2451171875,
          y: -1019.4290771484375,
          z: 10,
          roll: 0,
          pitch: -7.999988555908203,
          yaw: -174.24000549316406,
          distance: 1000
        }
      ],
      allDataItems: []
    };
  },
  mounted() {
    this.parseTree();
    window.getTreeAlarm = this.parseTree;
  },
  methods: {
    parseTree() {
      var tem = JSON.parse(window.sessionStorage.getItem("treeData"));
      tem &&
        this.treeForeach(tem, node => {
          node.code && this.allDataItems.push(JSON.parse(JSON.stringify(node)));
        });
    },
    moreclick() {
      var obj = {};
      obj.show = true;
      // obj.alarmtabledata = this.tableData;
      window.showhisbj(obj);
    },
    addclass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "firFont";
      }
    },
    liclick(data) {
      try {
        window.Sgworld.clearAllCovering();
        //   var timetype = window.sessionStorage.getItem('timeType');
        // var weathertype = window.sessionStorage.getItem('weatherType');
        // window.Sgworld.execute("grapi", "settime", { type: timetype }, null);
        // window.Sgworld.execute("grapi", "setweather", { type: weathertype }, null);
      } catch (error) {
        console.log(error);
      }
      data = JSON.parse(data.target.dataset.obj);
      // 取出当前点击的code值
      var temCode = data.code;
      if (temCode) {
        var temArr = JSON.parse(JSON.stringify(this.allDataItems));
        for (var i = 0; i < temArr.length; i++) {
          var temid = temArr[i].code;
          if (temid == temCode) {
            var newX = temArr[i].position.x;
            var newY = temArr[i].position.y;
            var newZ = temArr[i].position.z;
            var newRoll, newPitch, newYaw;
            var params = {
              name: temCode,
              location: new TUVector3(newX, newY, newZ),
              rotate: -45
            };
            // 从校验后的位置中取值
            axios.get("./static/json/PositionCalibration.json").then(res => {
              var positionCalibrationData = res.data;
              var tem = positionCalibrationData.find(item => {
                return item.name === temCode;
              });
              // 若当前点击的节点在校验文件中
              // 从校验文件中取值，并通过focusOn方法定位
              if (tem) {
                newRoll = tem.degree && tem.degree.roll;
                newPitch = tem.degree && tem.degree.pitch;
                newYaw = tem.degree && tem.degree.yaw;
                window.Sgworld.focusOn(
                  new TUVector3(newX, newY, newZ),
                  new TURotator(newRoll, newPitch, newYaw),
                  200,
                  () => {},
                  2
                );
              } else {
                // 当前点击的不在校验文件中 通过 设备名称进行定位
                window.Sgworld.execute("grapi", "AIPawnLocation", params, null);
              }
            });
            // 撒点定位
            var temObj = {};
            temObj.x = temArr[i].position.x;
            temObj.y = temArr[i].position.y;
            temObj.z = temArr[i].position.z;
            temObj.name =
              "门禁管理-" + temArr[i].floorId + "-" + temArr[i].code;
            temObj.id = temArr[i].floorId + "_" + temArr[i].id;
            temObj.scale = 0.3;
            temObj.image = window.ipUrl + "qy/static/images/popups/alarm.png";
            window.Sgworld.createBillboard(temObj);
            this.count++;
            var newcolor = { r: 255, g: 0, b: 0, a: 1 };
            var params = {
              text: "警报",
              id: this.count,
              color: newcolor,
              size: 1,
              location: new TUVector3(temObj.x, temObj.y, temObj.z)
            };
            window.Sgworld.execute("grapi", "CreatJingBao", params, null);
            var info = {};
            info.id = this.count;
            info.name = data.name;
            info.content = data.content;
            info.eid = data.id;
            window.showAlarmRecord(info);
            break;
          }
        }
      } else {
        this.$message("该条信息暂无code值！");
      }
    },
    // 时间戳转为普通日期格式
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, " ");
    },
    // 树的广度遍历
    treeForeach(tree, func) {
      let node,
        list = [...tree];
      while ((node = list.shift())) {
        func(node);
        node.children && list.push(...node.children);
      }
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    format(shijianchuo) {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    }
  },
  sockets: {
    sendAlertStatus(data) {
      if (data.length > 0) {
        this.isShow = true;
        let alertInfo = JSON.parse(data);
        alertInfo.forEach((item, index) => {
          var ran = parseInt(Math.random() * 8);
          item.position = this.tempositions[ran];
        });
        this.tableData = alertInfo;
      } else {
        this.isShow = false;
        this.tableData = [];
      }
    },
    sendAlarmStatus(data) {
      //报警推送服务
      if (data != "null") {
        var datajson = JSON.parse(data);
        var obj = {};
        obj.show = true;
        obj.code = datajson.code;
        obj.name = datajson.name;
        obj.content = datajson.content;
        obj.alarmType = datajson.alarmType;
        window.showAlarmAlert(obj);
      }
    }
  }
};
</script>
<style scoped>
.red {
  color: #ffe643;
}
.white {
  color: white;
}
.seamless-warp {
  height: 300px;
  overflow: hidden;
}
.empty {
  text-align: center;
  font-size: 30px;
  color: white;
  height: 300px;
  line-height: 300px;
}
.more {
  position: absolute;
  right: 20px;
  top: 40px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
.more:hover {
  color: #009cff;
}
</style>
<style>
.Alarm {
  width: 100%;
  height: 25%;
  position: relative;
}
.Alarm .alarmM {
  width: 645px;
  height: 112px;
  background: url("../../../../../static/images/alarm.png") no-repeat center;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
.Alarm .alarmList {
  width: 100%;
  height: calc(100% - 112px);
}
.Alarm .historyalarmList {
  width: 100%;
  height: calc(100% - 112px);
}
table {
  overflow-y: auto;
}
.el-table th,
.el-table tr {
  background-color: snow;
}
.el-table__row {
  min-height: 100px !important;
}
.el-table td,
.el-table th {
  text-align: center;
}
</style>
